<template>
  <view class="uni-grid-wrap">
    <view
      :id="elId"
      ref="uni-grid"
      class="uni-grid"
      :class="{ 'uni-grid--border': showBorder }"
      :style="{ 'border-left-color': borderColor }"
    >
      <slot />
    </view>
  </view>
</template>

<script>
  // #ifdef APP-NVUE
  const dom = uni.requireNativePlugin("dom");
  // #endif

  /**
   * Grid 宫格
   * @description 宫格组件
   * @tutorial https://ext.dcloud.net.cn/plugin?id=27
   * @property {Number} column 每列显示个数
   * @property {String} borderColor 边框颜色
   * @property {Boolean} showBorder 是否显示边框
   * @property {Boolean} square 是否方形显示
   * @property {Boolean} Boolean 点击背景是否高亮
   * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
   */
  export default {
    name: "UniGrid",
    emits: ["change"],
    props: {
      // 每列显示个数
      column: {
        type: Number,
        default: 3,
      },
      // 是否显示边框
      showBorder: {
        type: Boolean,
        default: true,
      },
      // 边框颜色
      borderColor: {
        type: String,
        default: "#D2D2D2",
      },
      // 是否正方形显示,默认为 true
      square: {
        type: Boolean,
        default: true,
      },
      highlight: {
        type: Boolean,
        default: true,
      },
    },
    provide() {
      return {
        grid: this,
      };
    },
    data() {
      const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
      return {
        elId,
        width: 0,
      };
    },
    created() {
      this.children = [];
    },
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
    },
    methods: {
      init() {
        setTimeout(() => {
          this._getSize((width) => {
            this.children.forEach((item, index) => {
              item.width = width;
            });
          });
        }, 50);
      },
      change(e) {
        this.$emit("change", e);
      },
      _getSize(fn) {
        // #ifndef APP-NVUE
        uni
          .createSelectorQuery()
          .in(this)
          .select(`#${this.elId}`)
          .boundingClientRect()
          .exec((ret) => {
            this.width = parseInt((ret[0].width - 1) / this.column) + "px";
            fn(this.width);
          });
        // #endif
        // #ifdef APP-NVUE
        dom.getComponentRect(this.$refs["uni-grid"], (ret) => {
          this.width = parseInt((ret.size.width - 1) / this.column) + "px";
          fn(this.width);
        });
        // #endif
      },
    },
  };
</script>

<style lang="scss" scoped>
  .uni-grid-wrap {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: column;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
  }

  .uni-grid {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    // flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .uni-grid--border {
    position: relative;
    /* #ifdef APP-NVUE */
    border-left-color: #d2d2d2;
    border-left-style: solid;
    border-left-width: 0.5px;
    /* #endif */
    /* #ifndef APP-NVUE */
    z-index: 1;
    border-left: 1px #d2d2d2 solid;
    /* #endif */
  }
</style>
